<template>
  <view class="my-settle-container">
     <!-- 全选区域 -->
      <label class="radio" @click="changeState">
        <radio color="#C00000" :checked="isFullCheck" /><text>全选</text>
      </label>

      <!-- 合计区域 -->
      <view class="amount-box">
        合计:<text class="amount">￥{{checkedGoodsAmount}}</text>
      </view>
      
      <!-- 结算区域 -->
      <view class="btn-settle" @click="settlement">结算({{checkedCount}})</view>
  </view>
</template>

<script>
  
  import { mapGetters, mapMutations, mapState } from 'vuex'
  
  export default {
    name:"my-settle",
    computed: {
      ...mapGetters('m_cart', ['checkedCount', 'total', 'checkedGoodsAmount']),
      ...mapGetters('m_user', ['addstr']),
      ...mapState('m_user', ['token']),
      ...mapState('m_cart', ['cart']),
      isFullCheck(){
        return this.checkedCount === this.total
      }
    },
    data() {
      return {
        second: 3
      };
    },
    methods: {
      ...mapMutations('m_cart', ['updateAllGoodsState']),
      ...mapMutations('m_user', ['updateRedirectInfo']),
      
      changeState(e){
        console.log('====', e)
        this.updateAllGoodsState(!this.isFullCheck)
      },
      
      // 结算判断
      settlement(){
        // 1 用户是否选择了商品
        if(this.checkedCount === 0) return uni.$showMsg('请选择商品！')
        
        // 2 用户是否选择了收获地址
        if(!this.addstr) return uni.$showMsg('请选择收获地址！')
        
        // 3 用户是否登录
        // if(!this.token.trim()) return uni.$showMsg('请先登录！')
        if(!this.token.trim()) {
          for(let i = 0; i<=this.second; i++){
            setTimeout(()=> {
              console.log(this.second-i)
              if(i===3){
                //跳转
                console.log('跳转')
                uni.switchTab({
                  url: '/pages/my/my',
                  success: () => {
                    this.updateRedirectInfo({
                      openType: 'switchTab',
                      from: '/pages/cart/cart'
                    })
                  }
                })
              }else{
                uni.showToast({
                  title: `您未登录，将在${this.second-i}秒后跳转到登录页`,
                  duration: 1000,
                  mask: true,
                  icon: 'none'
                })
              }
            }, i*1000)
          }
          return
        }
        
        console.log('你可以付钱了')
        this.payOrder()
      },
      // 准备支付
      async payOrder(){
        // 1 创建订单
        const orderInfo = {
          // order_price: this.checkedGoodsAmount,
          order_price: 0.01,
          consignee_addr: this.addstr,
          goods: this.cart.filter(item => item.goods_state).map(item => {
            return {
              goods_id: item.goods_id,
              goods_number: item.goods_count,
              goods_price: item.goods_price
            }
          })
        }
        
        const {data: res} = await uni.$http.post('/my/orders/create', orderInfo)

        if(res.meta.status !== 200) return uni.$showMsg('订单创建失败')
        
        console.log('=====',res)
        const order_number = res.message.order_number
        // 2 生成微信支付参数
        const {data: res2} = await uni.$http.post('/my/orders/req_unifiedorder', {order_number: order_number})
        
        if(res2.meta.status !== 200) return uni.$showMsg('生成微信支付参数')
        
        
        const payInfo = res2.message.pay
        console.log(payInfo)
        
        // 3 请求微信支付
        const [err, succ] = await uni.requestPayment(payInfo)
        if(err) return uni.$showMsg('订单支付失败')
        
        // 通知server检查订单支付状态
        const {data: res3} = await uni.$http.post('/my/orders/chkOrder', {order_number: order_number})
        
        if(res3.meta.status !== 200) return uni.$showMsg('订单支付失败')
        
        uni.showToast({
          title: '订单支付成功！',
        })
        
      }
    }
  }
</script>

<style lang="scss">

  .my-settle-container{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  // 将背景色从 cyan 改为 white
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5px;
  font-size: 14px;
  z-index: 99;

  .radio {
    display: flex;
    align-items: center;
  }

  .amount-box {
    .amount {
      color: #c00000;
    }
  }

  .btn-settle {
    height: 50px;
    min-width: 100px;
    background-color: #c00000;
    color: white;
    line-height: 50px;
    text-align: center;
    padding: 0 10px;
  }
  }
  
</style>
